{extend name="layout/layout" /}

{block name="pagecss"}
<style>
	#container{
		width: 650px;
		height: 300px;
	}
	#cover{
		position:absolute;left:0px;top:0px;
		background:rgba(0, 0, 0, 0.4);
		width:100%;  /*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/
		height:100%;
		filter:alpha(opacity=60);  /*设置透明度为60%*/
		opacity:0.6;  /*非IE浏览器下设置透明度为60%*/
		display:none;
		z-Index:9998;
	}
	#modal{
		position:absolute;
		width:600px;
		height:100px;
		top:50%;
		left:25%;
		background-color:#fff;
		display:none;
		cursor:pointer;
		z-Index:9999;
	}

	.but-right{
		display:block;

		width:100px;

		height:20px;

		float:right;

		text-align:center;

		line-height:20px;

		margin-top:40px;
	}
	#modify_spec .modal-footer{
			padding: 27px 15px 14px;
	}
</style>
<link href="__STATIC__/admin/pages/css/product.css" rel="stylesheet" type="text/css" />
<link href="__STATIC__/plugins/umeditor/umeditor.min.css" rel="stylesheet" type="text/css" />
<link href="__STATIC__/plugins/layui/css/layui.css" rel="stylesheet" type="text/css" />
{/block}

{block name="content"}
<div class="row">
	<div class="col-xs-12">
		<div class="box box-success">
			<div class="box-header with-border">
				<h3 class="box-title">添加商品</h3>
				<div class="box-tools">
					<!--<button class="btn bg-navy btn-sm" data-toggle="tooltip" title="" data-original-title="Back" onclick="history.go(-1);">
                        <i class="fa fa-reply"></i> 返回
                    </button>-->
				</div>
			</div>
			<div class="box-body">
				<form id="modal_new_role" class="form-horizontal form" method="post" enctype="multipart/form-data">
					<div class="form-body">
						<div class="form-group">
							<div class="col-md-5">
								<input type="hidden" name="id">
								<input type="hidden" name="totalSales">
								<input type="hidden" name="specType1s">
								<input type="hidden" name="specType2s">
								<input type="hidden" name="specType3s">
								<input type="hidden" name="list">
							</div>
						</div>

						<!--页面的遮罩层-->
						<div id="cover"></div>
						<!--页面的弹出框-->
						<div id="modal">
							<div>
								设置订单商品的配送方式和运费，并根据买家增加商品而追加运费。未设置订单无法配送！
							</div>
							<span class="form-inline but-right">
								<input id="close" type="button" value="取消" name="test"/>
								<input id="tdtSubId" type="button" value="设置" name="test"/>
							</span>
						</div>

						<div class="form-group">
							<label class="col-lg-2 col-xs-4 control-label"> <span class="required"> * </span>商品类型：</label>
							<div class=" col-lg-4 col-xs-3">
								<div class="relative isServiceClass">
									<label class="radio-inline"> <input type="radio" name="isService" checked value="2" />实物商品</label>
									<label class="radio-inline"> <input type="radio" name="isService" value="1" />服务商品(无需物流配送)</label>
								</div>
							</div>
						</div>

						<div class="form-group">
							<lable class="col-lg-2 control-label"> <span class="required"> * </span>商品名称：</lable>
							<div class="col-md-8">
								<input type="text" class="form-control input-xlarge" name="title" placeholder="请输入商品名称，最长40字" maxlength="40">
							</div>
						</div>

						<div class="form-group">
							<lable class="col-lg-2 control-label">
								<span class="required"> * </span>商品分类：</lable>
							<div class="col-md-8">
								<div id="checkbox_upd" class="checkbox pro_type pull-left "  style="height: auto;overflow: hidden;">
									<select name="typeId" class="form-control input-xlarge">
									{volist name="type" id="vo"}
									<option value="{$vo.id}">{$vo.name}</option>
									{/volist}
									</select>
								</div>
								<br />
								<div>
									<!-- <button type="button" class="btn add_type"> + 添加</button> -->
								</div>
							</div>
						</div>

						<div class="xqClass isPic">
							<div class="form-group">
								<label class="col-lg-2 col-xs-4 control-label"> <span class="required"> * </span>商品图片：</label>
								<div class="col-md-9">
									<p class="form-control-static">请上传750*560分辨率的图片,若过大,会被裁剪,最大500k</p>
									<div class="upPicCon">
										<div class="storeimg">
											<div class="uploaderCon" data-toggle="modal" data-target="#uploaderBox">
												<span class="icon0">+</span>
												<small class="color9">上传图片</small>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>

						<div class="form-group">
							<label class="col-lg-2 col-xs-4 control-label"> <span class="required"> * </span>商品规格：</label>
							<div class=" col-lg-4 col-xs-3">
								<div class="relative specClass">
									<label class="radio-inline"> <input type="radio" name="specClass" value="1" checked />统一规格</label>
									<label class="radio-inline"> <input type="radio" name="specClass" value="2" />多规格</label>
								</div>

							</div>
						</div>

						<div class="relative specCon specCon1">
							<div class="form-group">
								<label class="col-lg-2 col-xs-4 control-label"> <span class="required"> * </span>现价：</label>
								<div class=" col-lg-2 col-xs-3">
									<input type="number" class="form-control" name="currentPrice1" maxlength="7" value="" placeholder="请输入商品现价">
								</div>
								<span class="form-control-static pull-left"> 元 </span>
							</div>
							<div class="form-group">
								<label class="col-lg-2 col-xs-4 control-label"> <span class="required"> * </span>会员价：</label>
								<div class=" col-lg-2 col-xs-3">
									<input type="number" class="form-control" name="memberPrice1" maxlength="7" value="" placeholder="请输入会员价">
								</div>
								<span class="form-control-static pull-left"> 元  需配合会员功能使用</span>
							</div>
							<div class="form-group">
								<label class="col-lg-2 col-xs-4 control-label">拼团价：</label>
								<div class=" col-lg-2 col-xs-3">
									<input type="number" class="form-control" name="groupPrice1" maxlength="7" value="" placeholder="请输入拼团价">
								</div>
								<span class="form-control-static pull-left"> 元   需配合拼团功能使用 </span>
							</div>
							<div class="form-group">
								<label class="col-lg-2 col-xs-4 control-label">兑换积分：</label>
								<div class=" col-lg-2 col-xs-3">
									<input type="number" class="form-control" name="integralPrice1" maxlength="4" value="" placeholder="请输入兑换积分" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}">
								</div>
								<span class="form-control-static pull-left">需配合积分兑换功能使用，只能输入正整数 </span>
							</div>

							<div class="form-group">
								<label class="col-lg-2 col-xs-4 control-label"> <span class="required"> * </span>商品库存：</label>
								<div class=" col-lg-2 col-xs-3">
									<input type="text" class="form-control" name="storeCount1" maxlength="5" value="" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^0-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" placeholder="请输入商品库存">
								</div>
								<span class="form-control-static pull-left"> 件  <input type="checkbox" name="isStore" value="0" style="vertical-align: top;margin-left: 15px"> 无限制</span>
							</div>

							<div class="form-group">
								<label class="col-lg-2 col-xs-4 control-label"><span class="required"> * </span>重量：</label>
								<div class=" col-lg-2 col-xs-3">
									<input type="text" class="form-control" name="weight1" maxlength="7" value="" placeholder="请输入单个商品的重量">
								</div>
								<span class="form-control-static pull-left"> kg </span>
							</div>

							<div class="form-group">
								<label class="col-lg-2 col-xs-4 control-label">限购数量：</label>
								<div class=" col-lg-2 col-xs-3">
									<input type="text" class="form-control" name="limitCount1" maxlength="3" value="" placeholder="请输入限购销量" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" >
								</div>
								<span class="form-control-static pull-left"> 件 </span> <small><span class="form-control-static margin-left" style="display: inline-block;margin-top: 2px">最低1件起，不填则不限数量</span></small>
							</div>


						</div>
						<div class="relative specCon specCon2">
							<div class="form-group">
								<label class="col-lg-2 col-xs-4 control-label"> </label>
								<div class="col-lg-6 col-xs-3 btn_add">
									<button type="button" id="modifySpecTypeAndDetail" class="btn btn_save_role btn-default add_btn"  data-toggle="modal" data-target="#modify_spec">编辑规格生成明细列表</button>&nbsp;&nbsp;&nbsp;
									<input class="isStoreCheck" type="checkbox" name="isStoreCheck" value="0"  style="margin-left: 15px"> 库存无限制
								</div>
							</div>
							<div class="form-group">

								<div class="col-lg-6 col-xs-6 col-lg-offset-2 margin-top">
									<table class="table dataTable table-bordered"  id="table_spec">
										<thead>
										</thead>
										<tbody>
										</tbody>
									</table>
								</div>

							</div>
						</div>

						<div class="form-group">
							<lable class="col-lg-2 control-label">
								<span class="required"> * </span>商品详情：</lable>
							<div class="col-md-8">
								<!-- 加载编辑器的容器 -->
								<script id="container" name="detail" type="text/plain"></script>
								<div id="pro_txt" class="hidden"></div>

								<div id="btn-uploader1">
									<a id="pickfiles1" href="javascript:void 0;"></a>
								</div>

							</div>
						</div>

						<hr />

						<div class="form-actions">
							<div class="row">
								<div class="col-md-12">
									<div class="form-group">
										<label class="col-md-3 control-label"></label>
										<div class="col-md-9">
											<button type="button" id="save" class="btn btn-primary">
												保存 <i class="fa fa-floppy-o"></i>
											</button>
											<button type="button" id="btn_cancle" class="btn btn-default" onclick="history.go(-1);">
												返回 <i class="fa fa-mail-forward"></i>
											</button>
											<span class="help-block "></span>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>

<div class="modal fade" id="modify_spec" data-backdrop="static" data-keyboard="false" >
	<div class="modal-dialog" style="width:700px;height:700px">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
				<h4 class="modal-title">编辑规格</h4>
			</div>
			<div class="modal-body" >
				<!-- 表单提交-->
				<form action="" method="PUT" id="form_spec_modify" class="form-horizontal">
					<input name="editSpec" type="hidden" value="">
					<div class="form-body">
						<div class="alert alert-danger hide">
							您填写的信息有错误，无法提交，请检查。
						</div>
						<div class="alert alert-success hide">
							表单填写完毕，正在提交...
						</div>
						<div class="alert alert-warning hide">
							提交失败，请联系客服！
						</div>
						<div class="form-group">
							<div class="col-md-2">
								<button type="button" id="addSpecTypeBtn" class="btn btn-primary margin-left" >添加规格</button>
							</div>
							<lable class="col-md-10 control-label">
								最多可添加3种规格，每种规格最多可添加10个规格值
							</lable>
						</div>
					</div>

					<div class="modal-footer" style="text-align: center;">
						<button type="button" id="modifySpecDetailSure" class="btn btn-info">确定</button>
						<button type="button" class="btn" data-dismiss="modal">取消</button><span class="modify_spec_help-block "></span>
					</div>
				</form>
				<!-- 表单提交-->
			</div>
		</div>
	</div>
</div>

<!-- 新增商品分类 -->
<div class="modal fade" id="modal_new_type" data-backdrop="static" data-keyboard="false">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
				<h4 class="modal-title">新建商品分类</h4>
			</div>
			<div class="modal-body">
				<form class="form-horizontal">
					<div class="form-body">
						<span class="help-block text-center product_type"></span>
						<div class="form-group">
							<lable class="col-md-3 control-label"><span class="required"> * </span>分类名称：
							</lable>
							<div class="col-md-9">
								<input type="text" class="form-control input-medium" name="name" maxlength="12" placeholder="请输入分类名称,最多12字符">
							</div>
						</div>
						<div class="form-group">
							<lable class="col-md-3 control-label">排序：</lable>
							<div class="col-md-9">
								<input type="text" class="form-control input-medium" name="orderNo" maxlength="5" value="100" placeholder="数字越小排序越靠前...">
							</div>

						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-info btn_newType">提交</button>
						<button type="button" class="btn default" data-dismiss="modal">取消</button>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>

<!-- 图片弹框 -->
<div class="modal fade" id="uploaderBox" data-backdrop="static" data-keyboard="false">
	<div class="modal-dialog" style="width:700px; height: 520px;">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
				<h4 class="modal-title">图片</h4>
			</div>
			<div class="modal-body">
				<div class="form-horizontal">
					<button class="btn btn-primary" id="localUp">在本地中上传</button>
				</div>
				<div class="tab-content">
					<div class="" id="already">
						<table class="table" id="pic_table">

						</table>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" id="" class="btn default close-check" data-dismiss="modal">确定</button>
			</div>
		</div>
	</div>
</div>

{/block}

{block name="pagescript"}
<script src="__STATIC__/admin/js/include.js" type="text/javascript"></script>
<script>
    // 以下地址在此页面解析，供外部js使用
    var token_url = "{:url('admin/Image/token')}";   //获取七牛token地址
    var add_url = "{:url('admin/product/addProductSave')}";  //数据提交地址
    var index_url = "{:url('admin/product/index')}";  //商品列表页地址
    var spec_url = "{:url('admin/product/getspecDetail')}";   //获取多规格数据地址
    var type_url = "{:url('admin/product/typeSave')}";   //商品类型添加提交地址
    var record_url = "{:url('admin/Image/record')}";   //图片上传总表记录
    var del_img_url = "{:url('admin/Image/delete')}";   ////图片上传总表删除地址
    var layer_img = "{:url('admin/product/getList')}";  //图片组件

    var imgcount = 0;  //记录已选图片数量
</script>
<!-- 配置文件 -->
<script type="text/javascript" src="__STATIC__/plugins/umeditor/template.min.js"></script>
<script type="text/javascript" src="__STATIC__/plugins/umeditor/umeditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="__STATIC__/plugins/umeditor/umeditor.min.js"></script>
<script src="__STATIC__/admin/js/qiniu/plupload.full.min.js" type="text/javascript"></script>
<script src="__STATIC__/admin/js/qiniu/qiniu.js" type="text/javascript"></script>
<script src="__STATIC__/admin/js/qiniu/custom.js" type="text/javascript"></script>
<script src="__STATIC__/admin/js/qiniu/qiniuConfig.js" type="text/javascript"></script>
<script src="__STATIC__/admin/pages/js/product_add.js" type="text/javascript"></script>

<!-- 实例化编辑器 -->
<script type="text/javascript">

    window.UMEDITOR_CONFIG.toolbar = [
        // 加入一个 test
        'source | image'

        /*  'source | undo redo | bold italic underline strikethrough | superscript subscript | forecolor backcolor | removeformat |',
          'insertorderedlist insertunorderedlist | selectall cleardoc paragraph | fontfamily fontsize' ,
          '| justifyleft justifycenter justifyright justifyjustify |',
          ' emotion image   ',
          '| horizontal print preview '*/
    ];
    UM.registerUI('image', function(name) {
        var me = this;
        var $btn = $.eduibutton({
            icon: name,
            click: function() {
                document.getElementById("pickfiles1").click();
            },
            title: '上传图片'
        });
        return $btn;
    });
    var um = UM.getEditor('container');
    $(document).ready(function() {
        var pro_value = $("#pro_txt").text();
        um.ready(function() { //编辑器初始化完成再赋值
            um.setContent(pro_value); //赋值给UEditor
        });
    });

    //商品的规格数据
    var sourceSpecList=[];
</script>

<script>

    $(document).ready(function(){
        $("#close").click(function() {
            cover.style.display="none";   //隐藏遮罩层
            modal.style.display="none";   //隐藏弹出层
        })
    })
</script>
{/block}